<!DOCTYPE html>
<html lang="zn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            position: relative;
            width: 544px;
            height: 400px;
            margin: 50px;
        }
        
        .box1 {
            height: 400px;
            border: 1px solid #000;
            position: relative;
        }
        
        .huang {
            width: 300px;
            height: 300px;
            background: yellow;
            position: absolute;
            top: 0;
            left: 0;
            opacity: .5;
            display: none;
            border: 1px solid #ccc;
            cursor: move;
        }
        
        .bigImg {
            overflow: hidden;
            width: 500px;
            height: 500px;
            position: absolute;
            top: 0;
            left: 545px;
            border: 1px solid pink;
            display: none;
        }
        /* img {
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
        } */
        
        .img2 {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="box1"><img src="https://s3.ax1x.com/2020/12/17/r3dzOU.jpg" alt="" style="width: 544px;height: 305px;" class="img1"></div>
        <div class="huang"></div>
        <div class="bigImg"><img src="https://s3.ax1x.com/2020/12/17/r3dzOU.jpg" alt="" style="width: 816px;height: 458px;" class="img2"></div>
    </div>
    <script>
        var box = document.querySelector('.box');
        var bigImg = document.querySelector('.bigImg');
        var huang = document.querySelector('.huang');
        var img1 = document.querySelector('.img1');
        var img2 = document.querySelector('.img2');
        // 1.鼠标悬停显示消失
        box.addEventListener('mouseover', function(e) {
            bigImg.style.display = 'block';
            huang.style.display = 'block';
        })
        box.addEventListener('mouseout', function() {
                bigImg.style.display = 'none';
                huang.style.display = 'none';
            })
            //2. 黄色小方框跟随鼠标移动
        box.addEventListener('mousemove', function(e) {
            // (1). 先计算出鼠标在盒子内的坐标
            var x = e.pageX - this.offsetLeft;
            var y = e.pageY - this.offsetTop;
            // console.log(x, y);
            // (2) 减去盒子高度 300的一半 是 150 就是我们mask 的最终 left 和top值了
            // (3) 我们mask 移动的距离
            var maskX = x - huang.offsetWidth / 2;
            var maskY = y - huang.offsetHeight / 2;
            // huang.style.left = maskX + 'px';
            // huang.style.top = maskY + 'px';

            // if (maskX <= 0) huang.style.left = 0
            // if (maskY <= 0) huang.style.top = 0

            // // 544 是box的宽 150 是huang 的一半宽 244 = 544 - 300
            // if (544 - 150 - x <= 0) huang.style.left = '244px'

            // // 或者这样算 用x + huang的一半宽 如果大于等于 box 的宽 说明 huang的最右边框 已经超出了box的最大宽 只需要做限制就可以 
            // // if (x + 150 >= 544) huang.style.left = '244px'
            // // 下面同理可得y
            // if (y + 150 > 400) huang.style.top = '100px'

            // img2.style.marginLeft = `${-parseInt(huang.style.left) * 816 / 544}px`
            // img2.style.marginTop = `${-parseInt(huang.style.top) * 458 / 305}px`
            // console.log(bkl);

            if (maskX <= 0) {
                maskX = 0;
            } else if (maskX >= box.offsetWidth - huang.offsetWidth) {
                maskX = box.offsetWidth - huang.offsetWidth;
            }
            if (maskY <= 0) {
                maskY = 0;
            } else if (maskY >= box.offsetHeight - huang.offsetHeight) {
                maskY = box.offsetHeight - huang.offsetHeight;
            }
            huang.style.left = maskX + 'px';
            huang.style.top = maskY + 'px';
            // 最大遮罩层的值
            var is = bigImg.offsetWidth - img2.offsetWidth;
            var ts = bigImg.offsetHeight - img2.offsetHeight;
            // var
            var xs = maskX * is / (box.offsetWidth - huang.offsetWidth);
            var cs = maskY * is / (box.offsetHeight - huang.offsetHeight);
            img2.style.left = xs + 'px';
            img2.style.top = cs + 'px';
        })
    </script>
</body>

</html>